import {
    Cartesian3,
    SceneTransforms,
    Color,
    Cartesian2,
} from 'cesium'
/**
 * 添加点Marker-和坐标说明
 * @param position 经纬度数组[x,y]
 * @param iconImage  图片的内容
 */
const createHtml = (cviewer: any, position: any) => {
    let car3 = Cartesian3.fromDegrees(position[0], position[1],10);
    var point = cviewer.entities.add({
        position: car3,
        point: {
            pixelSize: 10,
            color: Color.YELLOW,
        }
    });
    let screenPosition = SceneTransforms.wgs84ToWindowCoordinates(cviewer.scene, car3);

    let pop = document.createElement('div');
    pop.innerHTML = `<div style='display: flex;flex-direction: column;'>
         <div style='display: flex;flex-direction:column;width: 200px;height: 200px;color:#00FA9A;border-radius: 10px;background-color: rgba(0,0,0,0.4);border:1px solid #00FA9A;'>
         <div style='color: #ffffff;font-size: 18px;font-weight: 600;margin-left: 10px;margin-top: 10px;'>位置信息</div>
         <div style='white-space: nowrap;margin-top: 10px;margin-left: 20px;'>经度：${position[0]}</div>
         <div style='white-space: nowrap;margin-left: 20px;'>纬度：${position[1]}</div>
         <div style='white-space: nowrap;margin-left: 20px;'>横坐标：${car3['x'].toFixed(2)}</div>
         <div style='white-space: nowrap;margin-left: 20px;'>纵坐标：${car3['y'].toFixed(2)}</div>
         <div style='white-space: nowrap;margin-left: 20px;'>高度：0</div></div>
         <div style='width: 100%;height: 18px;display: flex;justify-content: center;'>
         <div style='width: 0;border: 10px solid;border-color: #00FA9A transparent transparent transparent;'></div>
         </div>
         </div>`;
    pop.id = "zb_measure";
    pop.style.position = 'fixed';
    pop.style.left = (screenPosition['x'] - 100) + 'px';
    pop.style.top = (screenPosition['y'] - 200) + 'px';
    document.body.appendChild(pop);
    cviewer.scene.postRender.addEventListener(() => {
        //转化为屏幕坐标
        var windowPosition = SceneTransforms.wgs84ToWindowCoordinates(cviewer.scene, car3);
        if (!windowPosition) {
            return;
        }
        pop.style.left = (windowPosition.x - 100) + 'px';
        pop.style.top = (windowPosition.y - 200) + 'px';
        // 解决滚动不隐藏问题
        const camerPosition = cviewer.camera.position;
        let height = cviewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
        height += cviewer.scene.globe.ellipsoid.maximumRadius;
        if ((!(Cartesian3.distance(camerPosition, position) > height)) && cviewer.camera.positionCartographic.height < 50000000) {
            pop.style.display = "block"
        } else {
            pop.style.display = "none"
        }
    })
    return point;
}

/**
 * 创建文字提示 再用
 * @param viewer
 * @param position [x,y]
 */
const createCavansPopup=(viewer:any,position:any)=>{
    let showLabelFun = (dataMcInfo:any) => {
        var c = document.createElement("canvas");
        var settings = {
            canvas:c,
            canvasWidth:150, //canvas的宽度
            canvasHeight:65, //canvas的高度
            drawStartX:15, //绘制字符串起始x坐标 距离左侧
            drawStartY:28, //绘制字符串起始y坐标 距离顶部
            font:"12px 'Microsoft Yahei'", //文字样式
            text:"请修改掉默认的配置", //需要绘制的文本
            color:"#ffffff",//"#000000", //文字的颜色
            backgroundColor:"rgba(38, 38, 38, 0.75)"//"#ffffff"//背景颜色
        };

        //绘制带有圆角的背景
        CanvasRenderingContext2D.prototype['roundRect'] =
            function (x:any, y:any, width:any, height:any, radius:any, fill:any, stroke:any) {
                if (typeof stroke == "undefined") {
                    stroke = true;
                }
                if (typeof radius === "undefined") {
                    radius = 5;
                }
                this.beginPath();
                this.moveTo(x + radius, y);
                this.lineTo(x + width - radius, y);
                this.quadraticCurveTo(x + width, y, x + width, y + radius);
                this.lineTo(x + width, y + height - radius);
                this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
                this.lineTo(x + radius, y + height);
                this.quadraticCurveTo(x, y + height, x, y + height - radius);
                this.lineTo(x, y + radius);
                this.quadraticCurveTo(x, y, x + radius, y);
                this.fillStyle = settings.backgroundColor;
                this.closePath();
                if (stroke) {
                    this.stroke();
                }
                if (fill) {
                    this.fill();
                }
            };

        //获取2d的上线文开始设置相关属性
        let canvas = settings.canvas;
        canvas.width = settings.canvasWidth;
        canvas.height = settings.canvasHeight;
        let ctx:any = canvas.getContext("2d");

        //绘制带有圆角的背景
        ctx.roundRect(0,0,canvas.width,canvas.height,15,true)

        //填充文字
        ctx.font = settings.font;
        ctx.fillStyle = settings.color;
        ctx.fillText('终端名称:自动驾驶车01',settings.drawStartX,settings.drawStartY);
        ctx.fillText('速度:30 km/h',settings.drawStartX,settings.drawStartY+20);

        return canvas.toDataURL();
    }
    let point = viewer.entities.add({
        position:  Cartesian3.fromDegrees(position[0], position[1],10),
        point: {
            pixelSize: 20,
            color: Color.YELLOW,
        },
        billboard: {
            image: showLabelFun(''),
            pixelOffset: new  Cartesian2(0, -50),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,//被建筑物遮挡问题
        }
    });
}

/**
 * 绘制五角星
 * @param viewer
 * @param position 经纬度[x,y]
 */
const createSvg=(viewer:any,position:any)=>{
    let svgDataDeclare = "data:image/svg+xml,";
    let svgCircle = '<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:orange;stroke:purple;stroke-width:5;fill-rule:evenodd;" />';
    let svgPrefix = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" xml:space="preserve">';
    let svgSuffix = "</svg>";
    let svgString = svgPrefix + svgCircle + svgSuffix;
    let svgEntityImage = svgDataDeclare + svgString;
    viewer.entities.add({
        position: Cartesian3.fromDegrees(position[0], position[1]),
        billboard: {
            image: svgEntityImage,
            scale:2
        }
    });
}


export {
    createHtml,
    createSvg,
    createCavansPopup
}
